<template>
  <el-table
    :data="dataSource"
    class="table-list"
    border
    style="width: 100%"
    :row-style="showTr"
    row-key="id"
    :indent="8">
    <el-table-column
      prop="id"
      label="序号">
    </el-table-column>
    <el-table-column
      prop="menuText"
      label="名称"
      show-overflow-tooltip
      align="center">
    </el-table-column>
    <el-table-column
      label="图标"
      align="center">
      <template slot-scope="scope">
        <i class="menu-icon-com menu-icon-ash" :class="scope.row.icon"></i>
      </template>
    </el-table-column>
    <el-table-column
      label="类型"
      align="center">
      <template slot-scope="scope">
        {{scope.row.menuType | menuType}}
      </template>
    </el-table-column>
    <el-table-column
      prop="menuUrl"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="permission"
      label="权限标识"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column align="center" label="操作" width="260">
      <template slot-scope="scope">
        <div style="display: inline-block;">
          <a title="编辑" class="icon" href="javascript:;">
          <router-link :to="{name: 'MenuEdit', params: {id: scope.row.id, menuText:scope.row.menuText, pid:scope.row.sysType || 0, menuType:scope.row.menuType}}">
            <i class="iconfont icon-tianxie"></i>
          </router-link>
          </a>
        <a title="删除" class="icon" href="javascript:;" @click="handleDelete(scope.row.id)">
          <i class="iconfont icon-shanchu"></i>
        </a>
        <a title="新增" class="icon" href="javascript:;">
          <router-link :to="{name: 'MenuAdd', params: {id: scope.row.id, menuText:scope.row.menuText, pid:scope.row.sysType || 0}}">
          <i class="iconfont icon-jiahao"></i>
          </router-link>
        </a>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { deleteMenuById } from '@/apis/basics/menu';
//  import Vue from 'vue'
export default {
    name: 'tree-grid',
    props: {
    // 该属性是确认父组件传过来的数据是否已经是树形结构了，如果是，则不需要进行树形格式化
        treeStructure: {
            type: Boolean,
            default: function () {
                return false;
            }
        },
        // 这是相应的字段展示
        columns: {
            type: Array,
            default: function () {
                return [];
            }
        },
        // 这是数据源
        dataSource: {
            type: Array,
            default: function () {
                return [];
            }
        },
        // 这个作用是根据自己需求来的，比如在操作中涉及相关按钮编辑，删除等，需要向服务端发送请求，则可以把url传过来
        requestUrl: {
            type: String,
            default: function () {
                return '';
            }
        },
        // 这个是是否展示操作列
        treeType: {
            type: String,
            default: function () {
                return 'normal';
            }
        },
        // 是否默认展开所有树
        defaultExpandAll: {
            type: Boolean,
            default: function () {
                return false;
            }
        }
    },
    methods: {
    // 显示行
        showTr: function ({ row, index }) {
            let show = (row._parent ? (row._parent._expanded && row._parent._show) : true);
            row._show = show;
            return show ? '' : 'display:none;';
        },
        handleDelete (scopeId) {
            let id = scopeId;
            this.$msgbox.confirm('确定删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                closeOnClickModal: false,
                type: 'warning'
            }).then(() => {
                this.isLoading = true;
                deleteMenuById(id).then(data => {
                    // console.log(data)
                    if (data.code === 100) {
                        this.$message.success('删除成功');
                        // 调用父组件的方法，刷新数据
                        this.$parent.getDataList();
                        // this.handleDelete(this.treeDataSource, id)
                    } else {
                        this.$message.error(data.message);
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            }).finally(() => {
                this.isLoading = false;
            }).catch(() => {
            });
        }
    }
};
</script>
<style scoped>
  .ms-tree-space{position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: 18px;
    height: 14px;}
  .ms-tree-space::before{content: ""}
  table td{
    line-height: 26px;
  }

</style>
